<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>a: <input type="text" v-model="a" /></h3>

        <h3>b: <input type="text" v-model="b" /></h3>
        <p>a和b的总和:{{total}}</p>
        <h3>搜索： <input type="text" v-model="inp" />{{obj}}</h3>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                a: "",
                b: "",
                total: 0,
                inp: "",
                obj: "",
                users: [{
                    name: "张1",
                    age: 20,
                }, {
                    name: "张2",
                    age: 21,
                }, {
                    name: "张3",
                    age: 28,
                }, ],
            },
            // computed: {
            //     total: function() {
            //         setTimeout(() => {
            //             console.log("setTimeout");
            //             return this.a * this.b;
            //         }, 1000);
            //     },
            // },
            watch: {
                a: function(newA) {
                    setTimeout(() => {
                        this.total = newA * this.b;
                    }, 100);
                },
                b: function(newB) {
                    setTimeout(() => {
                        this.total = newB * this.a;
                    }, 100);
                },
                inp(newname) {
                    //搜索
                    setTimeout(() => {
                        let res = this.users.filter((item) => item.name == newname)[0];
                        this.obj = res;
                    }, 100);
                },
            },
        });
    </script>
</body>

</html>